import React, { useEffect, useRef, useState } from 'react'
// 引入css
import '../style/selected.css'
interface Props {

}

export const Swiper = (props: Props) => {
    let arr = [
        '../../../../public/image/xc1.webp',
        '../../../../public/image/xc2.webp',
        '../../../../public/image/xc3.webp',
        '../../../../public/image/xc4.webp',
        '../../../../public/image/xc5.webp',
        '../../../../public/image/xc6.webp',
        '../../../../public/image/xc7.webp',
        '../../../../public/image/xc8.webp',
    ]
    var [num, setNum] = useState(0)
    let ulbox = useRef<HTMLDivElement | any>(null)
    let imgbox = useRef<any>(null)
    let box = useRef<HTMLDivElement | any>(null)
    let rig = useRef<HTMLDivElement | null>(null)
    let lef = useRef<HTMLDivElement | null>(null)
    let [length, setCliligth] = useState<number>(0)
    let [width, setulWidth] = useState<number>(0)
    useEffect(() => {
        setCliligth(ulbox.current.children.length * imgbox.current.offsetWidth)
        setulWidth(box.current.clientWidth)
    }, [])
    let cs = 0
    const rigth = () => {
        cs++
        if (length - width > width) {
            num -= width
        }
        else {
            num -= length - width
        }
        setNum(num)

        if (length - width - Math.abs(num) * cs == 0) {
            if (rig.current && lef.current) {
                rig.current.style.display = 'none'
                lef.current.style.display = 'block'
            }
        }
    }

    const left = () => {
        cs++
        if (length - width > width) {
            num += width
        } else {
            num += length - width
        }
        setNum(num)

      
            if (rig.current && lef.current) {
                rig.current.style.display = 'block'
                lef.current.style.display = 'none'
            }

    }
    return (
        <div className='swiper_box' ref={box}>
            <div className="swiper_popIcon" ref={ulbox} style={{ transform: `translate(${num}px)`, transitionDuration: "1s" }}>
                {
                    arr.map((item, index) => {
                        return <div key={index} className='swiper_imgBox' ref={imgbox}>
                            <img src={item} className='swipe_img' alt="" />
                        </div>
                    })
                }
            </div>
            <div className="swiper_Left" onClick={left} ref={lef}>&lt;</div>
            <div className="swiper_Rigth" onClick={rigth} ref={rig}>&gt;</div>
        </div>
    )
}
export default Swiper